import { DatePicker, type DatePickerProps } from "antd";
import style from "./style.module.scss";
import { useDayStore } from "@/stores/dayStore";
import dayjs from 'dayjs';
import type { DailyData, StoreInfo } from "@/Interface/StoreInfoInterface";
import { useEffect, useRef, useState } from "react";
import { useBasicDataStore } from "@/stores/basicDataStore";
import DailyRevenue from "../echarts/DailyRevenue";
import YearOnYear from "../echarts/YearOnYear";
import MonthOnMonth from "../echarts/MonthOnMonth";

export default function DailyInfo() {

  let dateMap = useRef<Map<string, DailyData>>(new Map());
  const [dateString, setDateString] = useState<string>('')
  const setDayData = useDayStore(status => status.setDayData)
  const dayData = useDayStore(status => status.dayData)
  const basicData = useBasicDataStore(status => status.basicData) as StoreInfo

  const onChange: DatePickerProps['onChange'] = (_date, dateString) => {
    setDateString(dateString as string)
  };

  function defaultDate() {
    return dayData ? dayjs(`${dayData.date}`) : dayjs('2024-01-01')
  };

  useEffect(() => {
    if (basicData?.dailyData?.length) {
      const newMap = new Map();
      basicData.dailyData.forEach((item: DailyData) => {
        newMap.set(item.date, item);
        dateMap.current = newMap
      });
    }
  }, [basicData.dailyData])

  useEffect(() => {
    setDayData(dateMap.current.get(dateString) as DailyData)
  }, [dateString])


  return (
    <>
      <div className={`${style.size} ${style.dailyInfo}`}>
        <div className={style.top}>
          <h4>每日数据</h4>
          <div className={style.datePicker}>
            <DatePicker
              onChange={onChange}
              disabledDate={current => current.year() !== 2024}
              defaultPickerValue={defaultDate()}
              format="YYYY-MM-DD"
              defaultValue={defaultDate()}
              allowClear={false}
            />
          </div>
        </div>
        <div className={style.content}>
          <DailyRevenue />
          <ul>
            <li>订单量：{dayData?.orderCount} /单</li>
            <li>人流量：{dayData?.customerFlow} /人次</li>
          </ul>
        </div>
        <div className={style.rate}>
          <YearOnYear />
          <MonthOnMonth />
        </div>
      </div >
    </>
  )
}
